<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../js/vue2.6.12.js"></script>
	</head>
	<body>
		<div id="app">
			<pr v-for="posts in article" :key="posts.id"  :posts="posts"></pr>
		</div>
	</body>
	<script type="text/javascript">
		Vue.component('pr',{
			props:['posts'],
			template:`
				<div>
					<h1>{{posts.id}}</h1>
					<h3>{{posts.title}}</h3>
					<p>{{posts.author}}</p>
					<p>{{posts.created_at}}</p>
					<p>{{posts.des}}</p>
					<p>{{posts.content}}</p>
				</div>
			`
		})
		var vm=new Vue({
			el:'#app',
			data:{
				article:[
					{
						id:1,
						title:"第一篇文章",
						author:"yyf",
						created_at:"2020-01-01",
						des:"第一篇",
						content:"黑板擦还不发尽可能放擦肩你擦亮会计呢擦亮会计呢擦处理控件安擦肩离开你擦老框架"
					},
					{
						id:2,
						title:"第二篇文章",
						author:"huangq",
						created_at:"2020-01-01",
						des:"第二篇",
						content:"黑板擦还不发尽可能放擦肩你擦亮会计呢擦亮会计呢擦处理控件安擦肩离开你擦老框架"
					},
					{
						id:3,
						title:"第三篇文章",
						author:"daill",
						created_at:"2020-01-01",
						des:"第三篇",
						content:"黑板擦还不发尽可能放擦肩你擦亮会计呢擦亮会计呢擦处理控件安擦肩离开你擦老框架"
					},
					{
						id:4,
						title:"第四篇文章",
						author:"chenj",
						created_at:"2020-01-01",
						des:"第四篇",
						content:"黑板擦还不发尽可能放擦肩你擦亮会计呢擦亮会计呢擦处理控件安擦肩离开你擦老框架"
					}
				]
			},
		});
	</script>
	
</html>
